<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="能源管理—定额管理"></Header>

    <section class="search_bar">
      <!-- 1 -->
      <el-radio-group v-model="radio" @change="changeSelect1">
        <el-radio-button label="电"></el-radio-button>
        <el-radio-button label="水"></el-radio-button>
      </el-radio-group>
      <!-- 2 -->
      <LSelect label="定额种类" placeholder="请选择" style="margin:3px 0 0 30px;" :value="a" :options="option1"></LSelect>
      <!-- 3 -->
      <el-radio-group v-model="radio1" style="margin-left: 30px;">
        <el-radio-button label="年"></el-radio-button>
      </el-radio-group>
      <LDateTimeSelect5 label="选择时间" style="margin:3px 0 0 5px;" :value="t3" @month-event="getNewTime3"></LDateTimeSelect5>
      <!-- 4 -->
      <LInput label="搜索" v-model="h" style="margin:3px 0 0 30px;"></LInput>
      <!-- 5 -->
      <LButton label="查询" style="margin:0px 0 0 30px;"></LButton>
    </section>
    <!-- 表格 -->
    <section class="search_bar">
      <el-button type="primary" size="mini" @click="edit">编辑</el-button>
      <el-button type="success" size="mini" style="margin-left:20px" @click="sure">确定</el-button>
      <el-button type="info" size="mini" style="margin-left:20px" @click="cale">取消</el-button>
    </section>
    <el-table :data="tableData" style="width: 100%" :default-sort="{prop:'',order:ascending}" border>
      <el-table-column label="用能单位" prop="a"></el-table-column>
      <el-table-column label="年">
        <template #default="scope">
          <el-input v-model="scope.row.mData" :readonly="able"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否平均分配">
        <template #default="scope">
          <el-button type="primary" size="mini" :disabled="able" @click="ave(scope.row.id)">是</el-button>
        </template>
      </el-table-column>
      <el-table-column label="1月">
        <template #default="scope">
          <el-input v-model="scope.row.mData1" :readonly="able"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="2月">
        <template #default="scope">
          <el-input v-model="scope.row.mData2" :readonly="able"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="3月">
        <template #default="scope">
          <el-input v-model="scope.row.mData3"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="4月">
        <template #default="scope">
          <el-input v-model="scope.row.mData4" :readonly="able"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="5月">
        <template #default="scope">
          <el-input v-model="scope.row.mData5" :readonly="able"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="6月">
        <template #default="scope">
          <el-input v-model="scope.row.mData6" :readonly="able"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="7月">
        <template #default="scope">
          <el-input v-model="scope.row.mData7" :readonly="able"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="8月">
        <template #default="scope">
          <el-input v-model="scope.row.mData8" :readonly="able"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="9月">
        <template #default="scope">
          <el-input v-model="scope.row.mData9" :readonly="able"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="10月">
        <template #default="scope">
          <el-input v-model="scope.row.mData10" :readonly="able"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="11月">
        <template #default="scope">
          <el-input v-model="scope.row.mData11" :readonly="able"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="12月">
        <template #default="scope">
          <el-input v-model="scope.row.mData12"></el-input>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import moment from "moment";
import * as echarts from "echarts";
import Header from "@/components/Header";
import LSelect3 from "@/components/LSelect3.vue";
import LDateTimeSelect5 from "@/components/LDateTimeSelect5.vue";
import LButton from "@/components/LButton.vue";
import Ctwo from "@/components/Ctwo";
import LSelect from "@/components/LSelect.vue";
import LInput from "@/components/LInput.vue";

export default {
  components: {
    Header,
    LSelect3,
    LDateTimeSelect5,
    LButton,
    Ctwo,
    LSelect,
    LInput,
  },
  data() {
    return {
      radio: "电",
      radio1: "年",
      a: "",
      t3: new Date(),
      b: "3506.17",
      c1: "3506.17",
      c2: "3506.17",
      c3: "3506.17",
      c4: "3506.17",

      legendData1: null,
      xAxisData1: [],
      seriesData1: [], // 第一组 月度温湿度数据

      option1: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ],

      able: true,

      tableData: [
        {
          id: "0",
          a: "1#楼",
          mData: "200",
          mData1: "1",
          mData2: "1",
          mData3: "",
          mData4: "",
          mData5: "",
          mData6: "",
          mData7: "",
          mData8: "",
          mData9: "",
          mData10: "",
          mData11: "",
          mData12: "",
        },
        {
          id: "1",
          a: "2#楼",
        },
        {
          id: "2",
          a: "3#楼",
        },
        {
          id: "3",
          a: "4#楼",
        },
        {
          id: "4",
          a: "5#楼",
        },
      ],
    };
  },

  mounted() {},
  methods: {
    getNewTime3(t) {
      console.log("t3+++", t);
      this.t3 = t;
    },
    changeSelect1(val) {
      this.radio = val;
      console.log("this.radio:", this.radio);
    },
    edit() {
      this.able = false;
    },
    sure() {
      this.able = true;
    },
    cale() {
      this.able = true;
    },
    ave(id) {
      console.log("均分id:", id);
      let a = Number(this.tableData[id].mData) / 12;
      this.tableData[id].mData1 = a;
      this.tableData[id].mData2 = a;
      this.tableData[id].mData3 = a;
      this.tableData[id].mData4 = a;
      this.tableData[id].mData5 = a;
      this.tableData[id].mData6 = a;
      this.tableData[id].mData7 = a;
      this.tableData[id].mData8 = a;
      this.tableData[id].mData9 = a;
      this.tableData[id].mData10 = a;
      this.tableData[id].mData11 = a;
      this.tableData[id].mData12 = a;
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../OperaManage/opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/deep/ .el-radio-button__inner {
  border: none;
}

/deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-left: none;
}
</style>
